<template>
  <div class="d-flex justify-content-center align-items-center bg" style="height: 100vh">
    <div class="container">
      <div style="display: flex;justify-content: center;align-items: center;margin-bottom: 20px" class="changec">
        <span>{{_data.title}}</span>
      </div>
      <div class="title-info">
        <ul>
          <li>{{_data.desc}}</li>
        </ul>
      </div>
      <div class="d-flex justify-content-center align-items-center" style="margin-top: 40px;"><button type="button"
          class="btn btn-primary" @click="goToHome()">参与调查</button></div>
    </div>

  </div>
</template>

<script setup>
import axios from 'axios'
// vue
import { reactive, onMounted } from 'vue'
// 注意路径！！！
import $tools from '@/assets/tools.js'
// data
const _data = reactive({
  // 分享标题、描述、图标等数据(根据您的需求自定义即可)
    title:'',
    desc:'',
  info: {
    title: '',
    desc: '',
    cover: '',
    // ...
  }
})

// onMounted
onMounted(() => {
  // 一键开启页面分享功能
  datalist()
 
  document.title = '调查问卷';


})

const datalist=()=>{
          service.get('/prod-api/system/api/questionnaire/getQuestionnaire?questionnaireId='+getUrlCode('sid')).then(response => {    
            console.log(response)   
            //标题 副标题  分享标题 分享简介 分享图片地址  
            _data.title=response.data.title
            _data.desc=response.data.subTitle //副标题
            _data.info.title=response.data.shareTitle
            _data.info.desc=response.data.shareContent || ''
            _data.info.cover=response.data.shareImgUrl || 'http://inquire.jlrbyy.cn/dby/img/logo.png'
            getConfig()
        
            }).catch(function (error) {
                console.log(error);
            });
        }
const   getUrlCode=(variable) =>{
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return (false);
    }




/**
* 获取配置信息(尽量在mounted()钩子中执行)
* @description 拿到后端数据后,传入封装好的函数中进行验证
* @return void
*/
const getConfig = () => {
  // 请自行替换接口请求方式与地址！！
  axios(`http://inquire.jlrbyy.cn/prod-api/system/api/client/getShareCode`).then(res => {
    console.log('配置信息', res.data)
    // 1: 注入并验证信息
    $tools.config(res.data.data)
    // 2: 调用分享功能
    setShare()
  })
}

/**
* 获取配置信息(尽量在mounted()钩子中执行)
* @description 拿到后端数据后,传入封装好的函数中进行验证
* @return void
*/
const setShare = () => {
  // 分享标题、描述、图标等数据(根据您的需求自定义即可)
  const data = _data.info;
  console.log('===========',data)
  // "分享给朋友/分享到QQ"
  const appMessage = {
    title: data.title, //分享标题
    desc: data.desc, //分享描述
    link:location.href, //分享链接,默认当前页面(必须对应JS安全域名)
    imgUrl: data.cover, //分享图标
    success: () => {//调用成功
      // alert('成功')
    },
    fail: (err) => {//调用失败
      alert(JSON.stringify(err))
    }
  }
  // "分享到朋友圈/分享到QQ空间"
  const timeLine = {
    title: data.title, //分享标题
    link: location.href, //分享链接,默认当前页面(必须对应JS安全域名)
    imgUrl: data.cover, //分享图标
    success: () => {//调用成功
      // alert('成功')
    },
    fail: (err) => {//调用失败
      alert(JSON.stringify(err))
    }
  }
  // 丢入自动设置
  $tools.wxShare(appMessage, timeLine)
}
</script>
<script>
import service from '@/utils/request';
export default {

  name: 'Loginview',
  data() {
    return {
      form: {
        nickname: '',
        headimgurl: ''
      },
      username: '',
      password: '',
      imgsrc: '',
      username: '',
      openId: '',
      title:'',
      sid:''

    }
  },

  created() {
   this.login()
  },
  methods: {
    getpage(){
      let sid=this.getUrlCode('sid')
      let templateid=this.getUrlCode('templateid') || 0
    },
    getUrlCode(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return (false);
    },
    async login() {

      let userInfo = localStorage.getItem("userinfo")
      console.log(userInfo)

      if (userInfo === null) {
        let code = this.getUrlCode('code')
        console.log(code)
        if (code) {
          service.post('/prod-api/system/api/client/login?code=' + code).then(response => {
            if (response.code == 200) {
              this.imgsrc = response.data.userInfo.avatar
              this.openId = response.data.userInfo.openId
              this.sid=this.getUrlCode('sid')
              console.log(this.imgsrc)
              localStorage.setItem('userinfo', JSON.stringify(response.data.userInfo));
            }
            console.log(response)
          }).catch(function (error) {
            console.log(error);
          });
          //授权登录
          console.log(code)
        } else {
          // code 不存在，走微信网页授权逻辑 
          // 当前网页的url，供微信重定向使用 
          let loc_href = encodeURIComponent(window.location.href);
          // let loc_href='http://10.0.72.107:15080/system/api/client/login'
          // this.$config.weChat.appID 为微信公众号的appid 
          let appid = 'wx77a68f988e228ebd'
          let wxUrl =
            `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect\_uri=${loc_href}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
          console.log(wxUrl)
          // 跳转链接获取code 
          location.href = wxUrl
        }
      }
      else {
        userInfo = JSON.parse(userInfo)
        this.imgsrc = userInfo.avatar
        this.username = userInfo.nickName
        this.userid = userInfo.userId
        this.openId = userInfo.openId
        this.sid=userInfo.sid
      }

      // }
    },
    goToHome() {
      service.get('/prod-api/system/api/client/isSetAnswer?questionnaireId='+this.getUrlCode('sid')+'&openId=' + this.openId).then(response => {
        if (response.data.isAnswered == 1) {
          alert('已填写')
          return;
        }
        /*
        else if(response.data.subscribe==0 || response.data.subscribe=='')
        {
       //   alert('未关注')
      //    return;
        }
      */
        else {
          this.$router.push({
            path: "/list",
            query: {
              content: JSON.stringify({ id: this.userid }),
            },
          });
        }


      }).catch(function (error) {
        console.log(error);
      });
      /*

*/

    },

  }
}
</script>
<style scoped>
.changec span {
  display: inline-block;
  color: #ff0844;
  margin: 0 5px;
  font-size: 26px;
  animation: changeColor 2s infinite alternate;
}

@keyframes changeColor {
  0% {
    color: #ff0844;
  }

  50% {
    color: #fff;
  }

  100% {
    color: #ff0844;
  }
}

.bg {
  background-image: linear-gradient(to top, #ff0844 0%, #ff0844 100%);
}

.title-info {
  background-color: #fff;
  border-radius: 10px;
}

.title-info ul {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}

.title-info ul li {
  list-style: none;
  padding: 5px 15px;
}
</style>
